<template>
  <div class="search-result-page">
    <!-- 分类标签栏，独立分区 -->
    <div class="category-tabs-wrapper">

      <div class="category-tabs">

        <button
            v-for="(tab, idx) in tabs"
            :key="tab"
            :class="['tab-btn']"
            @click="handleTabClick(tab);"
        >
          {{ tab }}
        </button>
      </div>
    </div>

    <div class="card">
      <div class="card-title">公共点位</div>
      <div class="icon-grid">
        <div class="icon-item" v-for="item in publicPoints" :key="item.text">
          <div class="icon-bg" :style="{background: item.bg}">
            <img :src="item.icon" class="icon-img" @click="handleTabClick(item.text)" style="width:30px;height:30px;"/>
          </div>
          <div class="icon-label">
            {{ item.text.length > 5 ? item.text.slice(0, 5) + '...' : item.text }}
          </div>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-title">部门机构</div>
      <div class="icon-grid">
        <div class="icon-item" v-for="item in department" :key="item.text">
          <div class="icon-bg" :style="{background: item.bg}">
            <svg class="icon-svg" @click="handleTabClick(item.text)">
              <use :xlink:href="`#icon-${item.icon}`"></use>
            </svg>
          </div>
          <div class="icon-label" @click="handleTabClick(item.text);">
            {{ item.text.length > 5 ? item.text.slice(0, 5) + '...' : item.text }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {get_hot_points, get_department} from '@/api/mock/index.js'
import {ref} from 'vue'
import {useRouter} from 'vue-router'
import toilet from '/img/toilet.png'
import exit from '/img/exit.png'
const searchText = ref('')
const tabs = ref([])

const publicPoints =
    [
      {text: '厕所', icon: toilet, bg: '#fdb225'},
      {text: '出入口', icon: exit, bg: '#06d5a3'},
//   { text: '自助值机', icon: iconBase + 'office.png', bg: '#7ed6df' },
//   { text: '母婴室', icon: iconBase + 'toilet.png', bg: '#ffb6b9' },
//   { text: '行李托运', icon: iconBase + 'path.png', bg: '#ffc542' },
//   { text: '饮水处', icon: iconBase + 'search.png', bg: '#4f8cff' },
//   { text: '卫生间', icon: iconBase + 'toilet.png', bg: '#ffc542' },
//   { text: '电梯', icon: iconBase + '3D.png', bg: '#7ed6df' }
]
const department = ref([])

const router = useRouter()
const handleTabClick = (tabName) => {
  router.push({
    path: '/searchList', // 假设搜索列表页路径为 /search
    query: {
      keyword: tabName // 传递当前点击的 tab 名称作为 keyword
    }
  })
}

// SVG 图标映射
const svgIconMap = {
  'workDep.svg': 'workDep',
  'student.svg': 'student',
  'communicate.svg': 'communicate',
  'manage.svg': 'manage',
  'planing.svg': 'planing',
  'construct.svg': 'construct',
  'office.svg': 'office',
  'human.svg': 'human',
  'finance.svg': 'finance',
  'academic.svg': 'academic',
  'science.svg': 'science',
  'humanities.svg': 'humanities',
  'Academic-journals.svg': 'Academic-journals',
  'Propaganda-department.svg': 'Propaganda-department',
  'Party-Committee.svg': 'Party-Committee',
  'Discipline-inspection-supervision.svg': 'Discipline-inspection-supervision',
  'organize.svg': 'organize',
  'The-Financial-Audit-Office.svg': 'The-Financial-Audit-Office',
  '报告厅.svg': '报告厅'
}

const iconPool = [
  'workDep.svg',
  'student.svg',
  'communicate.svg',
  'manage.svg',
  'planing.svg',
  'construct.svg',
  'office.svg',
  'human.svg',
  'finance.svg',
  'academic.svg',
  'science.svg',
  'humanities.svg',
  'Academic-journals.svg',
  'Propaganda-department.svg',
  'Party-Committee.svg',
  'Discipline-inspection-supervision.svg',
  'organize.svg',
  'The-Financial-Audit-Office.svg',
  "报告厅.svg"
]

const departmentIcons = {
  '学生工作部、学生处、人民武装部':14,
  '离退休工作处': 0,
  '研究生院': 1,
  '学生处': 1,
  '国际交流与合作处': 2,
  '继续教育管理处': 3,
  '实验室建设与设备管理处': 3,
  '公共事务管理处': 3,
  '发展规划处': 4,
  '校园建设处': 5,
  '校友工作与发展联络办公室': 6,
  '杭州校区管委会办公室': 6,
  '学校办公室': 6,
  '人事处': 7,
  '计划财务处': 8,
  '教务处': 9,
  '科学技术处': 10,
  '人文社会科学处': 11,
  '学术期刊社': 12,
  '宣传部': 13,
  '机关党委': 14,
  '纪检监察室': 15,
  '组织部': 16,
  '审计处': 17,
  '报告厅':18
}
const borderColors = [
  '#c673c3', '#06d6a4', '#7cc9d9', '#ff8e8a',
  '#ffb325', '#5e95fc','#ffb325','#6ecb7f'
]
const getRandomColor = (item,count) => {
  if (item) {
    return borderColors[count%8]
  }

}

onMounted(async () => {
  try {
    const hot_res = await get_hot_points()
    // 假设接口返回的数据结构为 { data: [{ name: '点位1' }, ...] }
    const hotPoints = hot_res.data || []
    // 取前8条数据
    tabs.value = hotPoints.slice(0, 8).map(item => item.name)
  } catch (error) {
    console.error('获取热门点位失败:', error)
  }
  try {
    const department_res = await get_department()
    const departments = department_res.data || []
    let count = -1

    department.value = departments.map(item => {
      let iconIndex
      if (item && departmentIcons[item] !== undefined) {
        iconIndex = departmentIcons[item]
      } else {
        iconIndex = Math.floor(Math.random() * (iconPool.length))
      }
      count++

      // 获取 SVG 文件名
      const svgFileName = iconPool[iconIndex]

      // 从映射表获取图标名称，如果没有则从文件名推断
      let svgIconName = svgIconMap[svgFileName]
      if (!svgIconName) {
        // 移除 .svg 扩展名并处理特殊字符
        svgIconName = svgFileName.replace('.svg', '').replace(/[^a-zA-Z0-9\u4e00-\u9fa5\-_]/g, '-')
      }

      return {
        text: item,
        icon: svgIconName, // ✅ 使用 SVG 图标名称而不是路径
        bg: getRandomColor(item, count)
      }
    })
  } catch (error) {
    console.error('获取部门机构失败', error)
  }

})
</script>

<style scoped>
.search-result-page {
  background: #fafbfc;
  min-height: 100vh;
  padding-bottom: 16px;
}

.category-tabs-wrapper {
  padding-top: 0px;
  margin-bottom: 0;
  background: #fafbfc;
  border-radius: 0;
  box-shadow: none;
  height: 38px;
  display: flex;
  align-items: center;
}

.category-tabs {
  display: flex;
  overflow-x: auto;
  padding: 0 12px;
  gap: 8px;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
  height: 38px;
  align-items: center;
}

.category-tabs::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Webkit */
}

.tab-btn {
  padding: 6px 18px;
  border-radius: 8px;
  border: 1px solid #eee;
  background: #fff;
  font-size: 15px;
  color: #333;
  cursor: pointer;
  margin-right: 4px;
  white-space: nowrap;
}

.tab-btn.active {
  color: #2d8cf0;
  border-color: #2d8cf0;
  background: #eaf4ff;
}

.card {
  background: #fff;
  border-radius: 12px;
  margin: 0 12px 0 12px;
  padding: 16px 12px 12px 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 12px;
}

.icon-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 0;
}

.icon-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 12px;
}

.icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.icon-img {
  width: 28px;
  height: 28px;
}

.icon-label {
  font-size: 13px;
  color: #666;
  margin-top: 2px;
  white-space: normal; /* 允许换行 */
  -webkit-line-clamp: 2; /* 最多显示 2 行 */
  max-width: 120px;
}

.icon-svg {
  width: 30px;
  height: 30px;
  fill: white; /* SVG 图标颜色 */
  cursor: pointer;
}

.card .icon-grid .icon-item .icon-svg {
  width: 28px;
  height: 28px;
}

.icon-bg {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  font-size: 24px;
}

.card + .card {
  margin-top: 10px;
}
</style>
